<script setup lang="ts">
import { MenuList } from "./data";
import { useSystemStore } from "@/hooks/usePinia";

const systemOpt = useSystemStore();

const handleOpen = () => {}
const handleClose = () => {}
</script>

<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="menu"
    default-active="2"
    text-color="#fff"
    :collapse="!systemOpt.menuOpen"
    unique-opened
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <template v-for="(menuItem, menuItemindex) in MenuList">
      <el-sub-menu
        :index="menuItem.path"
        :key="`menu-${menuItemindex}`"
        v-if="menuItem.children"
      >
        <template #title v-if="menuItem.icon">
          <el-icon v-html="menuItem.icon"></el-icon>
          <span>{{ menuItem.title }}</span>
        </template>
        <el-menu-item
          :index="subItem.path"
          v-for="(subItem, index) in menuItem.children"
          :key="`submenu-${index}`"
        >
          {{ subItem.title }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item
        :index="menuItem.path"
        :key="`menu-${menuItemindex}`"
        v-else
      >
        <el-icon v-html="menuItem.icon"></el-icon>
        <span>{{ menuItem.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<style scoped lang="scss">
.menu {
}
</style>
